<template>
  <div class="navigation">
    <div class="logo">
      <img
        src="@/assets/奶茶.png"
        alt=""
      />
      <p>伍榴点商家中心</p>
    </div>
    <!-- 导航列表 -->
    <el-menu :default-active="menuIndex">
      <div v-for="(item, index) in navigationListData" :key="index">
        <router-link :to="{ path: item.path }">
          <el-menu-item :index="item.id">
            <el-icon><component :is="item.icon" /></el-icon>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </router-link>
      </div>
    </el-menu>
    <div class="exit-login">
      <div class="user-info">
        <p>{{ userInfo.employeeName }}</p>
        <p>{{ userInfo.employeeRole }}</p>
      </div>
      <el-button type="info" @click="logout">退出登录</el-button>
    </div>
  </div>
  <!-- 动态导航 -->
  <router-view>
    <div id="Content-page" class="Breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(item, index) in breadcrumbList"
          :key="index"
          :to="{ path: item.path }"
          >{{ item.name }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
  </router-view>
  <router-view></router-view>
</template>

<script setup lang="ts">
import { navigationListApi } from "@/api/api";
import { ref, onMounted, reactive, watch } from "vue";
import type { navigationListRes, loginRes } from "@/types/index";
// 请求导航列表
onMounted(async () => {
  const res = await navigationListApi();
  console.log(res);
  navigationListData.value = res.data;
  // 取出本地缓存的员工身份
  const { employeeName, employeeRole } = JSON.parse(
    localStorage.getItem("userInfo") as string
  ) as loginRes;
  userInfo.employeeName = employeeName;
  userInfo.employeeRole = employeeRole;
});
// 存储导航列表数据
const navigationListData = ref<navigationListRes[]>([]);
// 存储员工信息
const userInfo = reactive({
  employeeName: "",
  employeeRole: "",
});
const menuIndex = ref("1");
interface breadcrumbType {
  name: string;
  path: string;
}
const breadcrumbList = ref<breadcrumbType[]>([]);
// 动态路由监听
import { useRouter } from "vue-router";
const router = useRouter();
watch(
  () => router.currentRoute.value,
  (newval, oldval) => {
    if (oldval?.name === "dish-list" && newval.name === "add-product") {
      breadcrumbList.value = [
        { name: oldval.meta.title as string, path: oldval.path },
        { name: newval.meta.title as string, path: newval.path },
      ];
    } else {
      breadcrumbList.value = [{ name: newval.meta.title as string, path: newval.path }];
    }
    menuIndex.value = newval.meta.id as string;
  },
  { immediate: true }
);
// 退出登录
import { ElMessageBox } from "element-plus";
function logout() {
  ElMessageBox.confirm("确定退出登录吗", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    localStorage.removeItem("userInfo");
    router.push("/");
  });
}
</script>

<style scoped>
.navigation {
  left: 0;
  top: 0;
  position: fixed;
  height: 100vh;
  background-color: #fff;
  width: 250px;
  z-index: 999;
}
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}
.logo p {
  font-size: 20px;
  font-weight: bold;
}
.logo img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin: 10px 0;
}
/* 退出登录 */
.exit-login {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 220px;
  text-align: center;
  padding: 15px 0;
  z-index: 999;
  border-top: 1px solid #f2f2f2;
  background: #ffffff;
}
.user-info {
  padding-bottom: 15px;
}
.user-info p:nth-child(2) {
  font-size: 14px;
  padding-top: 10px;
  color: #c0c4cc;
}
.Breadcrumb {
  top: 30px !important;
}
</style>
